<script setup>
import { reactive, defineProps } from 'vue'
// 导入storeToRefs
import { storeToRefs } from 'pinia'
// 导入状态仓库
import { mainStore } from '@/stores/index'
// store对象
const store = mainStore()
// storeToRefs解决响应式特性丢失问题
const { tagLists } = storeToRefs(store)
// 接收组件传递的数据
const { item } = defineProps({
  item: {
    type: Object
  }
})
// 点击存储菜单数据
const handleNav = (item) => {
  console.log(item)
  // 判断是否有重复的菜单数据，去重处理
  let repeatName = tagLists.value.some(v => v.title == item.title) // 检测标题是否重复
  if(repeatName) return // 停止执行
  store.addTag(item) // 将item数据存储到pinia
}
</script>

<template>
  <!--左侧菜单-无限递归子菜单-不限制菜单级别数量效果-->
  <!--无子级--><!--判断如果无子级显示这个-->
  <el-menu-item :index="item.url" v-if="!item.child" @click="handleNav(item)">
    <el-icon><component :is="item.icon"></component></el-icon>
    <span>{{item.name}}</span>
  </el-menu-item>
  
  <!--有子级--><!--判断如果有子级显示这个-->
  <el-sub-menu :index="item.url" v-else>
    <!--多级菜单标题 #号是 具名插槽 title-->
    <template #title>
      <el-icon><component :is="item.icon"></component></el-icon>
      <span>{{item.name}}</span>
    </template>
    <!--如果有子级递归菜单自己--><!--组件递归-->
    <NavItem v-for="v in item.child" :key="v.url" :item="v"></NavItem>
    <!--<NavItem v-for="v in item.child" :key="v.url" :item="v" />-->
  </el-sub-menu>
</template>

<style lang="scss" scoped>
</style>